<template>
<!--放大镜效果-->
    <div class="preview">
        <div class="jqzoom" >
            <img :src="img"/>
            <div class="big" v-show="isShow">
                <img :src="img" ref="big" />
            </div>
            <div class="mask" ref="mask" v-show="isShow"></div>
            <div class="event"  @mousemove="handler" @mouseleave="isShow=false"></div> 
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            isShow:false
        }
    },
    methods:{
        handler(e){
             this.isShow=true
             const mask=this.$refs.mask
             const big=this.$refs.big
             const maskWidth=mask.offsetWidth/2
             const maskHeight=mask.offsetHeight/2
             const x=e.offsetX
             const y=e.offsetY
            let left,top
            if(x-maskWidth<=0){
                left=0
            }else if(x-maskWidth>=400-mask.offsetWidth){   
                left=400-mask.offsetWidth
            }
            else{
                left=x-maskWidth
            }
            if(y-maskHeight<=0){
                top=0
            }else if(y-maskHeight>=400-mask.offsetHeight){
                top=400-mask.offsetHeight
            }
            else{
                top=y-maskHeight
            }
           
            mask.style.top=top+'px'
            mask.style.left=left+'px'
            big.style.left=-2*left+'px'
            big.style.top=-2*top+'px'
        },
       
    },
     props:['img']
}
</script>
<style lang="less" scoped>
.preview {
        width: 400px;
        height: 400px;
        border: 1px solid #DFDFDF;
        .jqzoom {
            cursor: pointer;
            width: 400px;
            height: 400px;
            position: relative;
            img{
                width: 100%;
            }
            .big {
                width: 100%;
                height: 100%;
                position: absolute;
                top: -1px;
                left: 100%;
                border: 1px solid #aaa;
                overflow: hidden;
                z-index: 999;
                display: block;
                background: white;

                img {
                width: 200%;
                max-width: 200%;
                height: 200%;
                position: absolute;
                left: 0;
                top: 0;
            }
        }
            .mask{
                width: 200px;
                height: 200px;
                background: rgba(255,255,255,.5);
                position: absolute;
                left: 0;
                top: 0;
                border: 1px solid #ddd;
            }
            .event{
                width: 100%;
                height: 100%;
                position:absolute;
                top: 0;
                left: 0;
                z-index: 999;
            }
        
        }
        
        
}
</style>